<template>
  <div class="bossIt noSelect">
    <div class="header">
      <ManPageRightHeader>
        <template slot="titleIt">一周之内</template>
        <template slot="taskGmtStart">{{taskGmtStart}}</template>
        <template slot="taskGmtOver">{{taskGmtOver}}</template>
      </ManPageRightHeader>
    </div>
    <div class="body flex-column">
      <el-card :body-style="{'padding':'8px','width':'100%','display':'flex'}" shadow="hover" class="el-card tab flex-row" v-for="(value,index) in todayTasks" v-bind:key="index" v-show="value.taskStatus === 0" >
        <el-button @click="doneTask(value)"  class="el-button" type="primary" size="mini">done</el-button>
        <input class="noBorder noBack inputBox"   v-model="value.taskTitle" />
        <!--        -->
        <el-link type="success" style="margin-left: 25%;font-size: 12px">{{timeToString(value.taskGmtStart)}}</el-link>--
        <el-link type="success" style="font-size: 12px">{{timeToString(value.taskGmtOver)}}</el-link>
        <el-button @click="deleteOneTask(value.taskId,index)" class="el-button el-icon-delete" style="margin-left: 2%;margin-right: 0;"></el-button>
      </el-card>
      <el-empty description="" v-show="isEmpty"></el-empty>
    </div>
  </div>
</template>

<script>
import ManPageRightHeader from "@/components/ManPageRightHeader";

import {mapActions, mapState} from "vuex";
import {HttpManager} from "@/api";

export default {
  name: "Tab1_4",
  components: {ManPageRightHeader},
  data() {
    return {
      isShow: false,
      userId: '',
      isEmpty: false
    }
  },
  mounted() {
    /*this.getAllTasks()*/
    this.getTodayTasks({n: '7', userId: this.$cookie.get('userId')})
  },
  created() {
    /*this.getAllTasks()*/
    this.getTodayTasks({n: '7', userId: this.$cookie.get('userId')})
  },
  beforeDestroy() {
    let it = new URLSearchParams()
    it.append('tasks',JSON.stringify(this.todayTasks))
    HttpManager.updateTasks(it)
  },

  methods: {
    ...mapActions('module1', ['getTodayTasks','deleteTodayTask']),
    doneTask(value){
      value.taskStatus = 1
      let it = new URLSearchParams()
      it.append('tasks',JSON.stringify(this.tasks))
      HttpManager.updateTasks(it)
    },
    deleteOneTask(id,index){
      this.deleteTodayTask(index)
      let it = new URLSearchParams()
      it.append('taskId',id)
      HttpManager.deleteTask(it).then(()=>{
        const h = this.$createElement;
        this.$message({
          message: h('p', null, [
            h('span', null, '内容可以是 '),
            h('i', { style: 'color: teal' }, 'VNode')
          ])
        });
      })
    },
    timeToString(time) {
      if(time.length <= 11) return time;
      let datetime = new Date();
      datetime.setTime(time);
      let year = datetime.getFullYear();
      let month = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1)
          : datetime.getMonth() + 1;
      let date = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime
          .getDate();
      return year + "-" + month + "-" + date;
    }

  },
  computed: {
    ...mapState('module1', ['todayTasks']),
    taskGmtStart(){
      let today = new Date()
      today.setTime(today.getTime()+24*60*60*1000*7)
      return (today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate())
    },
    taskGmtOver(){
      let today = new Date()
      today.setTime(today.getTime()+24*60*60*1000*7)
      return (today.getFullYear()+"-" + (today.getMonth()+1) + "-" + today.getDate())
    }
  }
}
</script>

<style scoped>
.bossIt{
  height: 100%;
  box-shadow: #858080 0 1px 1px 0;

}
.body{
  margin-top: 30px;
  align-items: center;
}
.tab{
  width: 91%;
  text-align: left;
  margin-top: 10px;
  border-radius: 2px;
  box-shadow: #e9e2e2 0 0 0 1px;
}

.el-button{
  margin-right:15px;
  box-shadow: #79c7e9 0 0 0 2px;
  padding:2px 2px;
}
.el-button:hover{
  box-shadow: #e7613a 0 0 0 2px;
}
.inputBox{
  padding: 3px 3px;
}
</style>
